import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import unocss from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'
import { presetScrollbarHide } from 'unocss-preset-scrollbar-hide'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    unocss({
        rules:[
          [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 5}px` })], // m-参数*10 例如 m-10 就是 margin:100px
          ['flex', { display: "flex" }],
          ['pink', { color: 'pink' }],
          // [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })]
          [/^bc-(.+)$/, ([, color]) => ({ 'border-color': `#${color}` })],
          ['card-shadow', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }],
        ],
        shortcuts: [
          // btn: "pink flex",
          ['wh-full', 'w-full h-full'],
          ['f-c-c', 'flex justify-center items-center'],
          ['flex-col', 'flex flex-col'],
          ['text-ellipsis', 'truncate'],
          ['icon-btn', 'text-16 inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-primary !outline-none']
          ],
        presets: [
          presetUno(),
          presetAttributify(),
          presetIcons({
            scale: 1.2,
            cdn: 'https://esm.sh/',
            warn: true
          }),
          presetScrollbarHide()
        ],
        theme: {
          colors: {
            primary: 'var(--primary-color)',
            dark_bg: 'var(--dark-bg)',
            customBlack: '#202023',
            customButton: '#36363b',
          },
        },
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
